<template>
  <div class="proManager-root">
    <el-row :gutter="10" class="mb8 z-header">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
        >新增
        </el-button>
      </el-col>

      <!--      <el-col :span="1.5">-->
      <!--        <el-button-->
      <!--          type="primary"-->
      <!--          plain-->
      <!--          icon="el-icon-delete"-->
      <!--          size="mini"-->
      <!--          @click="handleExport"-->
      <!--        >导出-->
      <!--        </el-button>-->
      <!--      </el-col>-->

      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="back">
          返回
        </el-button>
      </el-col>
    </el-row>

    <el-table class="grass-table" v-loading="loading" :data="dataList" height="calc(100% - 120px)">

      <el-table-column type="index" width="50" label="序号"/>

      <el-table-column label="专家姓名" align="center" prop="name">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.name" placement="top-start">
            <div class="s-t-item">{{ scope.row.name }}</div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="性别" align="center" prop="sex">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.sex" placement="top-start">
            <div class="s-t-item">{{ scope.row.sex }}</div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="出生日期" align="center" prop="birthday">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.birthday" placement="top-start">
            <div class="s-t-item">{{ scope.row.birthday }}</div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="专家类型" align="center" prop="type">
        <template slot-scope="scope">


          <el-tooltip class="item" effect="dark" :content="scope.row.type" placement="top-start">
            <div class="s-t-item">{{ scope.row.type }}</div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="专家介绍" align="center" prop="secrcribe">
        <template slot-scope="scope">
          <el-popover
            effect="dark"
            placement="top-start"
            width="300"
            trigger="hover"
            :content="scope.row.secrcribe">
            <div slot="reference" class="s-t-item">{{ scope.row.secrcribe }}</div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="照片" align="center" prop="photoPath">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="lookBigPic(scope.row.photoPath)">查看</el-button>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
          >修改
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"/>


    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>

      <div class="zz-ass-f-container">
        <el-scrollbar>
          <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="专家姓名" prop="name">
              <el-input v-model="form.name"/>
            </el-form-item>
            <el-form-item label="专家类型" prop="type">
              <el-input v-model="form.type"/>
            </el-form-item>
            <el-form-item label="专家性别" prop="sex">

              <el-radio-group v-model="form.sex">
                <el-radio label="男">男</el-radio>
                <el-radio label="女">女</el-radio>
              </el-radio-group>

            </el-form-item>
            <el-form-item label="出生年月" prop="birthday">
              <el-date-picker
                v-model="form.birthday"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>

            <el-form-item label="专家介绍" prop="secrcribe">
              <el-input type="textarea" :rows="10" v-model="form.secrcribe"/>
            </el-form-item>

            <el-form-item label="专家照片" prop="photoPath">
              <upload-image :limit="1" v-model="form.photoPath"></upload-image>
            </el-form-item>

          </el-form>
        </el-scrollbar>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import { reactive, toRefs, onMounted, ref, computed } from '@vue/composition-api'
  import { Message, MessageBox } from 'element-ui'
  import store from '@/store'
  import router from '@/router'
  import { deletePro, editPro, addPro, getProListPage, getPro } from '@/api/industry/lab'
  import UploadImage from '@/components/UploadImage/index'
  import { larkViewer } from 'lark-common'
  import { getPicUrl } from '@/api/industry/file'

  export default {
    name: 'proManager',
    props: {},
    components: {
      UploadImage
    },
    setup(props, content) {

      let { history: { current: { query: { id, labId, pageNum, pageSize, queryType, showType, proId } } } } = router

      let {} = props

      const data = reactive({
        open: false,
        showSearch: true,
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          labId: id
        },
        dataList: [],
        total: 0,
        loading: false,
        title: '',
        form: {
          labId: id,
          photoPath: [],
          secrcribe: null,
          birthday: null,
          sex: '男',
          type: null,
          name: null
        },
        rules: {
          name: [
            { required: true, message: '专家姓名不能为空', trigger: 'blur' }
          ],
          secrcribe: [
            { required: true, message: '专家介绍不能为空', trigger: 'blur' }
          ],
          birthday: [
            { required: true, message: '出生日期不能为空', trigger: 'blur' }
          ],
          sex: [
            { required: true, message: '专家性别不能为空', trigger: 'blur' }
          ],
          type: [
            { required: true, message: '专家类型不能为空', trigger: 'blur' }
          ]
        }
      })

      const back = () => {
        router.push({ path: '/lab', query: { labId, pageNum, pageSize, queryType, showType, proId } })
      }

      // 表单重置
      const reset = () => {
        data.form = {
          labId: id,
          photoPath: [],
          secrcribe: null,
          birthday: null,
          sex: '男',
          type: null,
          name: null
        }
      }

      /** 新增按钮操作 */
      const handleAdd = () => {
        reset()
        data.open = true
        data.title = '新增专家数据'
      }

      /** 修改按钮操作 */
      const handleUpdate = row => {
        reset()
        const id = row.id
        getPro(id).then(response => {
          data.form = JSON.parse(JSON.stringify(response.data))
          data.form.photoPath = [{ path: response.data.photoPath, fileName: response.data.photoPath }]
          data.open = true
          data.title = '修改专家数据'
          data.opne = true
        })
      }

      const handleDelete = row => {
        MessageBox.confirm(`确定删除 ${row.name} 专家吗?`, '提示').then(() => {
          const id = row.id
          data.loading = true
          deletePro(id).then(() => {
            Message.success('删除成功')
            data.loading = false
            getList()

          })
        }).catch(() => {
          data.loading = false
        })

      }

      const getList = () => {
        data.loading = true
        getProListPage(data.queryParams).then(response => {
          data.dataList = response.rows
          data.total = response.total
          data.loading = false
        })
      }

      const submitForm = () => {
        content.refs.formRef.validate(async valid => {
          if (valid) {
            let { form } = data
            if (form.photoPath.length == 0) {
              Message.error('专家照片不能为空')
              return
            }
            let requestData = JSON.parse(JSON.stringify(form))
            requestData.photoPath = form.photoPath[form.photoPath.length - 1].path
            if (requestData.id != null) {
              await editPro(requestData)
            } else {
              await addPro(requestData)
            }
            data.open = false
            getList()
            reset()
          }
        })
      }

      // 取消按钮
      const cancel = () => {
        data.open = false
        reset()
      }

      const lookBigPic = (path) => {
        larkViewer([{ src: getPicUrl + '/' + path }])
      }

      getList()

      return { ...toRefs(data), back, handleAdd, getList, handleUpdate, cancel, submitForm, handleDelete, lookBigPic }
    }
  }
</script>

<style scoped lang="scss">
  $full: 100%;
  .proManager-root {
    width: 100%;
    height: 100%;
    padding: 10px;

    .z-header {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
    }

    .el-table {
      .el-table__body-wrapper {
        .el-table__body {
          .el-table__row {
            .cell {
              .s-t-item {
                width: 100%;
                height: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
          }
        }
      }
    }


    .pagination-container {
      height: 53px;
    }
  }
</style>
<style lang="scss">
  .zz-ass-f-container {
    height: 400px;
  }
</style>
